<template>
  <view :class="fixed ? '' : ('base-list-view ' + className)">
    <mescroll-uni :fixed="fixed" :height="height" :top="top" :bottom="bottom" :up="upOption" :down="downOption" @init="init" @down="downCallback" @up="upCallback">
      <view v-if="isEmpty" class="list-empty-box" style="padding-top: 200rpx">
        <msg-page :text="emptyText" :type="emptyType" :btn-text="btnText" @btnClick="refresh" />
      </view>
      <template v-else>
        <slot></slot>
      </template>
    </mescroll-uni>
  </view>
</template>

<script>
import MescrollUni from 'mescroll-uni'
import MsgPage from '@/components/msgPage'
export default {
  name: 'BaseListView',
  components: {
    MescrollUni,
    MsgPage
  },
  props: {
    isEmpty: {
      type: Boolean,
      default: false
    },
    emptyType: {
      type: String,
      default: 'network'
    },
    emptyText: {
      type: String,
      default: '网络异常，请检查网络'
    },
    btnText: {
      type: String,
      default: '刷新看看'
    },
    fixed: {
      type: Boolean,
      default: true
    },
    className: {
      type: String,
      default: ''
    },
    top: {
      type: Number,
      default: 0 // 距离顶部的距离
    },
    bottom: {
      type: Number,
      default: 0 // 距离底部的距离
    },
    enablePullRefresh: {
      type: Boolean,
      default: true // 是否启用下拉刷新
    },
    loadAfterInit: {
      type: Boolean,
      default: false // 是否立即请求一页数据
    },
    height: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      mescroll: null,
      downOption: {
        use: this.enablePullRefresh,
        auto: false,
        textLoading: '加载中'
      },
      upOption: {
        auto: this.loadAfterInit,
        isBounce: true,
        offset: 300,
        textLoading: '加载中',
        textNoMore: '我是有底线的',
        empty: {
          tip: '暂无数据'
        }
      }
    }
  },
  onReady() {
  },
  methods: {
    init(mescroll) {
      this.mescroll = mescroll
    },
    refresh() {
      if (this.btnText !== '刷新看看') {
        this.$emit('btnClick')
        return
      }
      if (!this.mescroll) return
      this.$emit('onPullRefresh', this.mescroll)
    },
    downCallback(mescroll) {
      this.$emit('onPullRefresh', mescroll)
    },
    upCallback(mescroll) {
      this.$emit('onLoadMore', mescroll)
    }
  }

}
</script>

<style lang="scss">
.base-list-view{
  min-height: 100rpx;
}
.list-empty-box{
  padding-top: 200rpx;
}
</style>
